<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 观察者模式
    // 观察者模式，通常也被叫做 发布-订阅模式 或者 消息模式, 英文名称叫做 Observer
    // 官方解释： 当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，解决了主体对象与观察者之间功能的耦合，即一个对象状态改变给其他对象通知的问题
    // 听起来很迷糊，但是其实没有很难


    // 消息盒子  
    // 订阅消息(类型 => 分类)
    // 发布消息  => 给订阅者发布(按类型)
    // 取消订阅(类型 => 分类)

    // 订阅消息
    document.addEventListener("click",function(){
        console.log("点击事件被触发了",1111);
    })
    document.addEventListener("click",function(){
        console.log("点击事件被触发了",2222);
    })

    // 浏览器监听到用户点击文档之后  => 发布消息
    // 对应click类型的事件 执行一个或多个回调函数
    // document => (click,MouseEvent)

    // 取消订阅  => 对应函数的引用取消
    document.removeEventListener("click",function(){
        console.log("点击事件被触发了",1111);
    })
    document.removeEventListener("click",function(){
        console.log("点击事件被触发了",2222);
    })

    // 今天的发布订阅 => 和addEventListener非常相似(可以理解为是一个自定义事件)
</script>
</html>